<template>
	<vSelectEdit v-model="showValue" :options="select_option"
	             :treeOptions="select_tree_option"
	             :data_list="data_list" class="select_bottom"
	             @event="handleTreeEvent"
	             @select="handleChange" />
</template>

<script>
import { mapState } from "vuex";
import ClientForm from "@common/views/base/dialog/related-party/ClientForm";
import SupplierForm from "@common/views/base/dialog/supplier/SupplierForm";

export default {
    name: "vSelectBottom",
    provide() {
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
        };
    },
    model: {
        prop: 'value',
        event: 'changeValue',
    },
    props: {
        params: Object,
        treeOptions: {
            //树配置对象
            type: Object,
            default() {
                return {};
            },
        },
        options: {
            //select配置
            type: Object,
            default() {
                return {};
            },
        },
        type: {
            type: String,
            default() {
                return "supplierDrawer";
            },
        },
        value: {},
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        const _this = this;
        return {
            showValue: undefined,
            select_option: {},
            defaultOptions: {
                //下拉框新增按钮
                tree: false,
                ref: "$checkTree",
                placeholder: "请选择客户",
                filterable: true,
                remote: true,
                remoteMethod: _this.remoteMethod,
                props: {
                    value: "sid",
                    // label: "name",
                    label: 'code',
                },
                bottomAction: {
                    //底部按钮配置
                    label: "新增",
                    icon: "el-icon-circle-plus-outline",
                    click: _this.addSelect,
                },
            },
            select_tree_option: {
                ref: "$client_tree",
                defaultExpandAll: true,
                props: {
                    label: "name",
                    // label: "code",
                    children: "children",
                },
            },
            data_list: [],
            query: "",
        };
    },
    computed: {
        ...mapState(['global_setting']),
    },
    watch: {
        options: {
            handler() {
                this.initOptions(this.options);
            },
            deep: true,
            immediate: true,
        },
        showValue() {
            let filter = this.data_list.filter(item => item.sid === this.showValue);
            if (this.$utils.isNotEmptyList(filter)) {
                this.$emit("event", {
                    type: 'change',
                    value: this.showValue,
                    data: filter[0],
                });
            } else if (this.$utils.isEmpty(this.showValue)) {
                this.$emit("event", {
                    type: 'change',
                    value: this.showValue,
                });
            }
            if (typeof this.showValue !== 'undefined') {
                this.dispatch('ElFormItem', 'el.form.change', this.showValue);
            }
            this.$emit('changeValue', this.showValue);
            this.$emit("input", this.showValue);
        },
        value: {
            handler() {
                this.showValue = this.value;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        initOptions(options) {
            let $this = this;
            $this.query = '';
            let bottomAction = $this.defaultOptions.bottomAction;
            if (options.bottomAction) {
                bottomAction = $.extend({}, bottomAction, options.bottomAction);
            }
            if (options.hideBottomAction) {
                bottomAction = null;
            }
            let props = $.extend({}, $this.defaultOptions.props);
            props.label = 'display';
            if (options.props) {
                props = $.extend({}, options.props);
            }
            $this.select_option = $.extend({}, $this.defaultOptions, options, {
                bottomAction,
                disabled: $this.disabled,
                props,
            });
            $this.select_tree_option = $.extend({}, $this.select_tree_option, $this.treeOptions);
            $this.refresh(true);
        },
        // 新增按钮
        addSelect() {
            let _this = this;
            let showFooter = true;
            let bottomAction = $.extend({}, _this.select_option.bottomAction)
            let component = bottomAction && bottomAction.addComponent;
            if (!component) {
                showFooter = false;
                component = _this.type === 'clientsDrawer' ? ClientForm : ClientForm;
            }
            let addComponentProps = {
                propsData: {
                    row: {},
                },
                options: {},
                selectBottom: true,
                type: _this.type,
            };
            if (bottomAction && typeof bottomAction.addComponentProps === 'function') {
                if (this.params) {
                    const {row, column} = this.params;
                    addComponentProps = bottomAction.addComponentProps({row, column}, _this.data_list);
                } else {
                    addComponentProps = bottomAction.addComponentProps(_this.data_list);
                }
            }
            _this.$dialog({
                width: bottomAction.width || '60%',
                title: bottomAction.title || '创建',
                showFooter,
                component: {
                    value: component,
                    props: addComponentProps,
                    event(event, dialog) {
                        if (event === 'closeDialog') {
                            dialog.visible = false;
                            return;
                        }
                        if (event.type === 'refresh') {
                            if (_this.params && _this.$utils.isNotEmpty(bottomAction.addBusEvent)) {
                                const {row} = _this.params;
                                _this.$bus.$emit(bottomAction.addBusEvent, row, event.data);
                                return;
                            }
                            _this.$emit('event', event);
                            _this.refresh(false, event.data);
                        }
                    }
                },
            });
        },
        refresh(init, addData) {
            let $this = this;
            if ($this.type === 'clientsDrawer') {
                $this.initSysClientList($this.query, init, addData);
            } else if ($this.type === 'supplierDrawer') {
                $this.initSysSupplierList($this.query, init, addData);
            } else if ($this.type === 'custom') {
                $this.initDataList($this.query, init, addData);
            }
        },
        // 远程搜索方法
        remoteMethod(query) {
            let $this = this;
            if (query && this.query == query) {
                return;
            } else if (query) {
                this.query = query
            }
            switch ($this.type) {
                case "clientsDrawer":
                    $this.initSysClientList(query);
                    break;
                case "supplierDrawer":
                    $this.initSysSupplierList(query);
                    break;
                case "custom":
                    $this.initDataList(query);
                    break;
            }
        },
        initSysClientList(query, init, addData) {
            const _this = this;
            let queryData = {
                pageSize: 50,
                search_Value: query,
                search_value: query,
                filter_global: '1',
            };
            if (_this.params && _this.options && typeof _this.options.params === 'function') {
                const {row, column} = this.params;
                queryData = _this.options.params({row, column}, queryData);
            }
            let multiple = typeof _this.select_option.multiple === 'undefined' ? false : _this.select_option.multiple;
            if (init && !multiple && _this.$utils.isNotEmpty(_this.value)) {
                queryData.selected_value = _this.value;
            }
            if (_this.$utils.isNotEmpty(_this.options.skip_permission)) {
                queryData.skip_permission = _this.options.skip_permission;
            }
            _this.data_list = [];
            let url = _this.$api.API_FindSysClients;
            if (_this.$utils.isNotEmpty(_this.select_option.url)) {
                url = _this.select_option.url;
            }
            return _this.fetchData(url, queryData).then(result => {
                _this.data_list = result.data || [];
                _this.$nextTick(() => {
                    if (addData && _this.$utils.isNotEmpty(addData[_this.select_option.props.value])) {
                        _this.showValue = addData[_this.select_option.props.value];
                    } else {
                        _this.showValue = _this.value;
                    }
                });
            }).catch(() => {
            });
        },
        initSysSupplierList(query, init, addData) {
            const _this = this;
            let queryData = {
                pageSize: 50,
                search_Value: query,
                search_value: query,
                filter_global: '1',
            };
            if (_this.params && _this.options && typeof _this.options.params === 'function') {
                const {row, column} = this.params;
                queryData = _this.options.params({row, column}, queryData);
            }
            let multiple = typeof _this.select_option.multiple === 'undefined' ? false : _this.select_option.multiple;
            if (init && !multiple && _this.$utils.isNotEmpty(_this.value)) {
                queryData.selected_value = _this.value;
            }
            _this.data_list = [];
            let url = _this.$api.API_FindSysSuppliers;
            if (_this.$utils.isNotEmpty(_this.select_option.url)) {
                url = _this.select_option.url;
            }
            return _this.fetchData(url, queryData).then(result => {
                _this.data_list = result.data || [];
                _this.$nextTick(() => {
                    if (addData && _this.$utils.isNotEmpty(addData[_this.select_option.props.value])) {
                        _this.showValue = addData[_this.select_option.props.value];
                    } else {
                        _this.showValue = _this.value;
                    }
                });
            }).catch(() => {
            });
        },
        initDataList(query, init, addData) {
            const _this = this;
            if (_this.options && _this.$utils.isEmpty(_this.options.url)) {
                return;
            }
            let queryData = {
                pageSize: 50,
                search_Value: query,
                search_value: query,
                filter_global: '1',
            };
            if (_this.params && _this.options && typeof _this.options.params === 'function') {
                const {row, column} = this.params;
                queryData = _this.options.params({row, column}, queryData);
            } else if (_this.options && typeof _this.options.params === 'function') {
                queryData = _this.options.params(queryData);
            }
            let multiple = typeof _this.select_option.multiple === 'undefined' ? false : _this.select_option.multiple;
            if (init && !multiple && _this.$utils.isNotEmpty(_this.value)) {
                queryData.selected_value = _this.value;
            }
            _this.data_list = [];
            return _this.fetchData(_this.options.url, queryData).then(result => {
                let resData = result.data || [];
                if (_this.options && typeof _this.options.procData === 'function') {
                    resData = _this.options.procData(resData);
                }
                _this.data_list = resData;
                _this.$nextTick(() => {
                    if (addData && _this.$utils.isNotEmpty(addData[_this.select_option.props.value])) {
                        _this.showValue = addData[_this.select_option.props.value];
                    } else {
                        _this.showValue = _this.value;
                    }
                });
            }).catch(() => {
            });
        },
        handleEvent(event, data) {
            //接受树传递的数据
            let $this = this;
            if (event.type === "add" && event.data) {
                $this.data_list.unshift(event.data);
                $this.$nextTick(() => {
                    let field = ($this.select_option.props && $this.select_option.props.value) || 'sid';
                    this.showValue = event.data[field];
                });
            }
        },
        handleChange(value) {
            //接受select传递的数据
            this.showValue = value;
        },
        handleTreeEvent(event) {
            let $this = this;
            $this.$emit('changeValue', $this.showValue);
            if (['clear', 'visibleChange', 'removeTag'].indexOf(event.type) !== -1) {
                if (event.type === 'removeTag') {
                    $this.$emit("input", $this.showValue);
                }
                $this.$emit("selectEvent", event);
                return;
            }
            $this.$emit("handleTreeEvent", event);
        },
    },
};
</script>
<style scoped>
.my-dropdown {
    max-height: 30vh;
    min-width: 200px;
    min-height: 100px;
    overflow: auto;
    background-color: #fff;
    padding: 0 0 10px 0;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.tree,
.my-Select {
    width: 100%;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 30vh;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}

.el-tree-node__label {
    font-weight: normal;
}

.el-tree >>> .is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
}

.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
}

>>> .el-select-dropdown {
    max-height: 31vh;
    min-width: 200px;
    min-height: 100px;
    overflow: auto;
}

/deep/ .el-select-dropdown .treeEdit {
    max-height: 30vh;
    min-width: 200px;
    min-height: 100px;
    overflow: auto;
    padding: 0;
}
</style>
<style>

</style>
